<script setup>
import { onMounted, onUnmounted, ref } from "vue";
import gsap from "gsap-trial";
import { ScrollTrigger } from "gsap-trial/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

const main = ref();
let ctx;

onMounted(() => {
  const tl = gsap.timeline();
  ctx = gsap.context((self) => {
    const boxes = self.selector(".box");
    boxes.forEach((box, i) => {
      gsap.set(box, {
        zIndex: i,
        opacity: 0,
        x: i % 2 == 0 ? "-100%" : "100%",
        rotate: i % 2 == 0 ? -45 : 45,
        marginTop: i % 2 == 0 ? "0" : "10rem",
      });
      tl.to(box, {
        duration: 2.5,
        opacity: 1,
        x: 0,
        y: 0,
        rotate: 0,
        scrollTrigger: {
          trigger: box,
          start: "center bottom",
          end: "top 20%",
          scrub: 1.5, // 可调整到终点的延迟时间
        },
      });
    });
  }, main.value);

  // 使用gsap监听滚动条滚动，通过修改startOffset的值进行动画
  gsap.to(".wavy_text textPath", {
    scrollTrigger: {
      trigger: ".wavy_text textPath",
      start: "top center",
      end: "bottom center",
      scrub: 1.5,
      onUpdate: (self) => {
        const progress = self.progress; // 获取滚动进度
        let startOffset = -progress * 100; // 计算新的startOffset值
        self.trigger.setAttribute("startOffset", startOffset + "%");
      },
    },
    duration: 2.5,
  });
});

onUnmounted(() => {
  ctx.revert(); // <- Easy Cleanup!
});
</script>

<template>
  <main>
    <section class="panel center column gradient-blue text-dark">
      <h1>Basic ScrollTrigger in VueJS</h1>
      <h2>Scroll down to see the magic happen!!</h2>
    </section>
    <div class="panel center column grid" ref="main">
      <div class="box gradient-green m-5">box</div>
      <div class="box gradient-green m-5">box</div>
      <div class="box gradient-green m-5">box</div>
      <div class="box gradient-green m-5">box</div>
    </div>
    <section
      class="panel center gradient-purple column text-dark"
      style="min-height: 400px"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="100%"
        viewBox="0 0 1970 524"
        fill="none"
        class="text_path"
      >
        <path
          d="M1 302.793C94.5516 260.635 172.043 225.302 259.17 222.09C346.298 218.878 449.486 302.793 601.256 302.793C753.026 302.793 869.464 222.09 1034.08 222.09C1198.7 222.09 1376.17 302.793 1550.42 302.793C1724.68 302.793 1837.5 222.09 1970 222.09"
          stroke="none"
          id="wavePath"
        ></path>
        <text fill="currentColor" font-size="8rem" class="wavy_text">
          <textPath href="#wavePath">
            *start* Get Lazy . Get Lazy . Get Lazy . Get Lazy . *center* . Get
            Lazy . Get Lazy . Get Lazy . Get Lazy . *end*
          </textPath>
        </text>
      </svg>
    </section>
    <section class="panel center gradient-orange column text-dark">
      <h1>The End!</h1>
      <h2 class="center">
        For more information visit:&nbsp;
        <a
          href="https://greensock.com/scrolltrigger/"
          target="_blank"
          rel="noreferrer"
        >
          greensock.com/scrolltrigger/
        </a>
      </h2>
    </section>
  </main>
</template>
<style scoped lang="scss">
.grid {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  padding: 2rem 0 7rem;
}
main {
  overflow: hidden;
}
.box {
  width: 100%;
  height: 100%;
  border-radius: 1.5rem;
}
</style>
